<template>
  <div class="editDialog">
    <el-dialog
        v-model="centerDialogVisible"
        :title="formTitle"
        width="52%"
        top="3%"
        destroy-on-close
        center
        @close="dialogClose">
      <el-form
          ref="ruleFormRef"
          label-position="top"
          label-width="100px"
          :model="formLabelAlign"
          :rules="rules">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="方案名称" prop="userName">
              <el-input v-model="formLabelAlign.costPlanName" style="width: 200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="formLabelAlign.lostPriceName">
              <el-input-number v-model="formLabelAlign.lostPrice" :precision="2" :step="0.1" min="0" class="inputNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="结算周期">
                  <el-radio-group v-model="formLabelAlign.isMonth">
                    <el-radio :label="false">年</el-radio>
                    <el-radio :label="true">月</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="formLabelAlign.isMonth" label="结算日期">
                  <el-input-number v-model="formLabelAlign.costPlanSettlement" class="inputNum" :step="1" min="0"
                                   max="31"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="方案类型">
              <el-radio-group v-model="formLabelAlign.costPlanType" @change="changeCostPlanType">
                <el-radio :label="1">定价</el-radio>
                <el-radio :label="2">区间</el-radio>
                <el-radio :label="3">阶梯</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
                style="margin-top: 25px;"
                v-if="(formLabelAlign.costPlanType === 2 && timeRangeList.length < 4) || formLabelAlign.costPlanType === 3"
                class="Btn mt-2 buttom" size="small" type="topSubButtom" @click="addCostPlanColumnList()">
              <svg-icon icon-class="add" class="buttonSvg"/>
              <span v-if="formLabelAlign.costPlanType === 3">新增区间类型</span>
              <span v-else>新增阶梯类型</span>
            </el-button>
          </el-col>

        </el-row>
        <div class="addType">
          <el-form-item
              v-for="(range, index) in formLabelAlign.costPlanColumnList"
              :key="range.key"
              :prop="range.costPlanColumnId">
            <div v-if="formLabelAlign.costPlanType === 3" style="width: 100%;margin-top:20px;">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="formLableTitle">区间名称:</div>
                  <el-input v-model="range.costPlanColumnName"/>
                </el-col>
                <el-col :span="10">
                  <div class="formLableTitle">区间范围:</div>
                  <el-input-number v-model="range.startRange" :precision="2" :step="0.1" min="0" class="inputNum"/>
                  -
                  <el-input-number v-model="range.endRange" :precision="2" :step="0.1" min="0" class="inputNum"/>
                </el-col>
                <el-col :span="6">
                  <div class="formLableTitle">区间计费:</div>
                  <el-input-number v-model="range.price" :precision="2" :step="0.1" min="0" class="inputNum"/>
                </el-col>
                <el-col :span="2">
                  <el-button
                      style="margin-top: 28px;"
                      v-if="parseInt(index) !== 0 || parseInt(index) !== (formLabelAlign.costPlanColumnList.length - 1)"
                      class="btn-donate" size="small" type="del" @click="removeCostPlanColumn(index)">
                    <svg-icon icon-class="del" class="buttonSvg"/>
                  </el-button>
                </el-col>
              </el-row>
            </div>

            <div v-else-if="formLabelAlign.costPlanType === 2">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="formLableTitle">区间名称:</div>
                  <el-input v-model="range.costPlanColumnName"/>
                </el-col>
                <el-col :span="9">
                  <div class="formLableTitle">区间范围:</div>
                  <el-time-picker class="editElTimeDialog" v-model="range.startRange"
                                  arrow-control placeholder="起始时间"/>
                  -
                  <el-time-picker class="editElTimeDialog" v-model="range.endRange" arrow-control
                                  placeholder="结束时间"/>
                </el-col>
                <el-col :span="5">
                  <div class="formLableTitle">区间计费:</div>
                  <el-input-number v-model="range.price" :precision="2" :step="0.1" min="0" class="inputNum"/>
                </el-col>
                <el-col :span="5">
                  <div class="formLableTitle">区间类型:</div>
                  <el-select class="selectView" v-model="range.type" placeholder="请选择区间类型">
                    <el-option
                        v-for="item in costPlanTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                  </el-select>
                </el-col>
                <el-col :span="1">
                  <el-button
                      v-if="parseInt(index) !== 0 || parseInt(index) !== (formLabelAlign.costPlanColumnList.length - 1)"
                      class="btn-donate topButtomConst" size="small" type="del" @click="removeCostPlanColumn(index)">
                    <svg-icon icon-class="del" class="buttonSvg"/>
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="bottomButton" style="text-align: end;">
        <el-button class="affirm" @click="submit" style="width: 10%;height: 100%;">确认</el-button>
        <el-button class="cancel" @click="centerDialogVisible=false" style="width: 10%;height: 100%;">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let component;
export default {
  name: "AddCostPlanDialog",
  props: ["queryData"],
  data() {
    return {
      formTitle: '',
      costPlanId: null,
      centerDialogVisible: false,
      costPlanTypeOptions: [
        {value: 1, label: "尖"},
        {value: 2, label: "峰"},
        {value: 3, label: "平"},
        {value: 4, label: "谷"},
      ],
      formLabelAlign: {
        costPlanSettlement: 1,
        costPlanColumnList: [],
        costPlanName: "",
        costPlanType: 1,
        lostPriceName: "",
        lostPrice: 0.00,
        isMonth: false,
      },
      consumptionRangeList: [],
      timeRangeList: [],
    }
  },
  methods: {
    async showDialog(row) {
      component = this;
      component.formTitle = '付费方案添加';
      component.formLabelAlign.lostPriceName = row.costPlanType >= 2 ? "非区间内定价" : "定价";
      component.$nextTick(() => {
        if (row.costPlanId) {
          component.formTitle = '付费方案编辑';
          component.formLabelAlign = row;
          if (row.costPlanType === 2) {
            component.consumptionRangeList = row.costPlanColumnList;
          } else if (row.costPlanType === 3) {
            component.timeRangeList = row.costPlanColumnList;
          }
          console.log(row.costPlanColumnList);
        }
        component.formLabelAlign.actionType = 'costPlanEdit';
        component.formLabelAlign.deviceType = row.deviceType
        component.centerDialogVisible = true;
      });
    },
    async submit() {
      if (component.formLabelAlign.costPlanType >= 2 && component.formLabelAlign.costPlanColumnList.length === 0) {
        component.$message.error("请添加区域后再提交");
      } else {
        let response = await component.$asyncPost("costPlan", component.formLabelAlign);
        if (response.success) {
          this.$emit("queryData");
          component.dialogClose();
        }
      }

    },
    changeCostPlanType(type) {
      switch (type) {
        case 1:
          component.formLabelAlign.costPlanColumnList = [];
          component.formLabelAlign.lostPriceName = "定价"
          break;
        case 2:
          component.formLabelAlign.costPlanColumnList = component.timeRangeList;
          component.formLabelAlign.lostPriceName = "非区间内定价"
          if (component.formLabelAlign.costPlanColumnList.length == 0) component.addCostPlanColumnList();
          break;
        case 3:
          component.formLabelAlign.costPlanColumnList = component.consumptionRangeList;
          component.formLabelAlign.lostPriceName = "非区间内定价"
          if (component.formLabelAlign.costPlanColumnList.length == 0) component.addCostPlanColumnList();
          break;
      }
    },
    removeCostPlanColumn(index) {
      if (component.formLabelAlign.costPlanType === 3) {
        component.consumptionRangeList.splice(index, 1);
        component.formLabelAlign.costPlanColumnList = component.consumptionRangeList;
      } else if (component.formLabelAlign.costPlanType === 2) {
        component.timeRangeList.splice(index, 1);
        component.formLabelAlign.costPlanColumnList = component.timeRangeList;
      }
    },
    addCostPlanColumnList() {
      if (component.formLabelAlign.costPlanType === 3) {
        component.consumptionRangeList.push({
          costPlanColumnName: "",
          startRange: 0,
          endRange: 0,
          price: 0.00,
          type: ''
        })
        component.formLabelAlign.costPlanColumnList = component.consumptionRangeList;
      } else if (component.formLabelAlign.costPlanType === 2) {
        if (component.timeRangeList.length < 4) {
          component.timeRangeList.push({
            costPlanColumnName: "",
            startRange: "",
            endRange: "",
            price: 0.00,
            type: ''
          })
        }
        component.formLabelAlign.costPlanColumnList = component.timeRangeList;
      }
    },

    dialogClose() {
      component.centerDialogVisible = false;
      component.consumptionRangeList = [];
      component.timeRangeList = [];
      component.formLabelAlign = {
        costPlanColumnList: [],
        costPlanName: "",
        costPlanType: 1,
        lostPriceName: "",
        lostPrice: 0.00,
        isMonth: false,
      }
    }
  }
}
</script>

<style lang="scss">
.editDialog {
  .addType {
    overflow-x: hidden;
    min-height: 0px;
    border-radius: 4px;
    padding: 0px 20px;
    max-height: 350px;
    background: rgba(106, 106, 106, 0.18);
  }

  .topButtomConst {
    margin-top: 28px;
  }
  .el-date-editor {
    padding: 0px 5px;
    width: 150px;
  }
}
</style>